<template>
  <van-form label-width="80px" @submit="onSubmit">
    <van-field
      v-model="formData.email"
      label="用户名"
      name="用户名"
      placeholder="请输入要注册的邮箱账号"
      clearable
      center
      :rules="[{ required: true, message: '请填写邮箱账号' }]"
    >
      <template #button>
        <van-button :disabled="formData.disabled" size="small" type="primary" @click="sendYzm">{{ formData.yzTime }}</van-button>
      </template>
    </van-field>
    <van-field
      v-model="formData.password"
      :type="passwordType"
      name="密码"
      label="密码"
      placeholder="会员密码"
      :rules="[{ required: true, message: '请填写会员密码' }]"
    >
      <template #button>
        <van-icon
          name="eye-o"
          @click="
            passwordType === 'password'
              ? (passwordType = 'text')
              : (passwordType = 'password')
          "
        />
      </template>
    </van-field>
    <van-field
      v-model="formData.verPassword"
      :type="verPasswordType"
      name="验证密码"
      label="验证密码"
      placeholder="验证会员密码"
      :rules="[{ required: true, message: '请验证会员密码' }]"
    >
      <template #button>
        <van-icon
          name="eye-o"
          @click="
            verPasswordType === 'password'
              ? (verPasswordType = 'text')
              : (verPasswordType = 'password')
          "
        />
      </template>
    </van-field>
    <van-field
      v-model="formData.yzm"
      name="邮箱验证码"
      label="邮箱验证码"
      placeholder="请输入邮箱验证码"
      :rules="[{ required: true, message: '请输入邮箱验证码' }]"
    />
    <div style="margin: 20px 10px">
      <van-button round block type="info" native-type="submit">注册</van-button>
    </div>
  </van-form>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      formData: {
        email: '407126588@qq.com',
        password: '123',
        verPassword: '123',
        yzTime: '发送验证码'
      },
      passwordType: 'password',
      verPasswordType: 'password'
    }
  },
  methods: {
    onSubmit(formName) {
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {
    //       const data = new FormData()
    //       data.append('email', this.ruleForm.email)
    //       data.append('password', this.ruleForm.password)
    //       data.append('yzm', this.ruleForm.yzm)
    //       this.$axios
    //         .post(`${userUrl}/log_operation/register`, data)
    //         .then(res => {
    //           if (res.data.ok === 1) {
    //             this._initsetUserInfo(this.ruleForm.email)

      //             this.$message({
      //               type: 'success',
      //               message: '账号注册成功'
      //             })

      //             this.sendMessageToUser({
      //               text: adminData.text,
      //               sendUserName: adminData.userName,
      //               userName: this.ruleForm.email,
      //               sendCoverUrl: adminData.coverUrl
      //             })
      //               .then(res => {
      //                 console.log(res.data.data)
      //               })
      //               .catch(err => {
      //                 console.log('错误信息：' + err)
      //               })

    //             this.resetForm('ruleForm')
    //             this.$router.push('log_in')
    //           } else if (res.data.ok === -2) {
    //             alert('验证码错误！')
    //           } else if (res.data.ok === -3) {
    //             alert(res.data.data)
    //           } else if (res.data.ok === -4) {
    //             alert('验证码已过期,请重新发送验证码！')
    //           } else {
    //             alert('数据返回错误！')
    //           }
    //         })
    //         .catch(err => {
    //           alert('请求数据错误：' + err)
    //         })
    //     } else {
    //       console.log('error submit!!')
    //       return false
    //     }
    //   })
    },
    sendYzm() {
      this.formData.disabled = true
      const pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
      if (!pattern.test(this.formData.email)) {
        this.$message({
          message: '请输入正确的邮箱地址！',
          type: 'warning'
        })
        this.formData.disabled = false
        return
      }
      const data = this.formData.email
      this.yzm({ email: data })
        .then(res => {
          if (res.data.ok) {
            alert('邮箱验证码发送成功！')
            this.formData.yzTime = 60
            const time = setInterval(() => {
              if (this.formData.yzTime === 0) {
                this.formData.yzTime = '发送验证码'
                this.formData.disabled = false
                clearInterval(time)
              } else {
                this.formData.yzTime = this.formData.yzTime - 1
              }
            }, 1000)
          } else {
            alert('邮箱验证码发送失败，请检查邮箱是否填写正确。')
            this.formData.disabled = false
          }
        })
        .catch(err => {
          alert('请求的数据错误：' + err)
          this.formData.disabled = false
        })
    },
    ...mapActions(['yzm'])
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  height: 80px;
  padding: 0 20px;
  .email {
    flex: 1;
    height: 100%;
    line-height: 80px;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
  }
  .other {
    flex: 0 0 auto;
    line-height: 100px;
    height: 100%;
    color: #aaa;
    font-size: 12px;
  }
}
.van-form {
  padding: 0 10px;
}
.van-radio {
  margin-bottom: 12px;
}
.fun {
  width: 100%;
  height: 60px;
  display: flex;
  padding: 0 24px;
  justify-content: space-between;
  margin-top: 40px;
  line-height: 60px;
  font-size: 14px;
}
.van-field {
  margin-bottom: 10px;
}
</style>
